import React, { useRef, useEffect } from 'react';

const Index = (props) => {
  const { list, setID } = props
  // 获取列表节点
  const liList = useRef([])
  const audioList = useRef([])
  // 获取ref 回调函数
  const getList = (ref) => {
    // 将每一个节点推出数组
    liList.current.push(ref)
  }
  const getAudio = ref => {
    audioList.current.push(ref)
  }

  // 处理点击
  const handleClick = (e, v, i) => {
    // 添加样式
    e.target.classList.add('active')
    e.target.style.transform = 'translate(2px, 2px)'
    // 设置标题
    setID(v.id)
    // 播放
    audioList.current[i].play()
    // 延迟.2s 样式
    setTimeout(() => {
      e.target.classList.remove('active')
      e.target.style.transform = ''
    }, 200)

  }


  // 副作用
  // 不依赖任何数据 类似 componentDidMount
  useEffect(() => {
    const handlekeyDown = e => {
      list.forEach((v, i) => {
        if (v.keyCode === e.keyCode) {
          // li 点击事件执行
          liList.current[i].click()
        }
      })
    }
    // 键盘事件
    document.addEventListener('keydown', handlekeyDown)
    // 销毁  类似 componentUnMount
    return () => {
      document.removeEventListener('keydown', handlekeyDown)
    }
  }, [])

  return (
    <div className="left">
      <ul>
        {
          list.map((v, i) => {
            return (
              <li key={i} onClick={e => handleClick(e, v, i)} ref={getList}>
                {v.keyTrigger}
                <audio src={v.url} ref={getAudio}></audio>
              </li>
            )
          })
        }
      </ul>
    </div>
  );
}

export default Index;